import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {PlusOutlined} from '@ant-design/icons';
import {Button, Card, Table, Modal, InputNumber, Tabs, message} from 'antd';
import {UseTable,UseSearch} from '../../../components'
import StudioDetail from './StudioDetail';
import InnovationStudioController from '../../../services/InnovationStudio/InnovationStudioController'

const {confirm} = Modal
class CanApplyStudioList extends React.Component {
    constructor(props) {
        super(props);
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.state = { 
            userInfo:userInfo,
            dataSource:[],
            selectedRowKeys:[],
            query:{},
            freshen:false

         };
    }
    showNewStudio=()=>this.setState({visibleNewStudio:true})
    showStop=(studioCode)=>{
        confirm({
            title:'确认',
            content:"确定要停运此工作室吗？",
            onOk(){
                console.log('停止了',studioCode)
            }
        })
    }
    showUpdate=(rowData)=>{
        this.setState({
            visibleUpdate:true,
            rowData,
        })
    }
    submitUpate=()=>{

    }

    applyToJoin=(rowData)=>{
        let that = this
        let {userInfo} = this.state
        let params={
            studioCode:rowData.studioCode,
            name:userInfo.name,
            userName:userInfo.userName
        }
        confirm({
            title:'申请确认',
            content:'确定要申请加入 “'+rowData.studioName+'” 工作室吗？',
            onOk(){
                InnovationStudioController.applyToJoin(params).then(r=>{
                    if(r&&r.data===1){
                        message.success('添加成功')
                        that.freshen()
                    }
                    else{
                        message.success('请勿重复操作')
                    }
                })
            }
        })
    }
    showMembers=(rowData)=>{
        this.setState({
            visibleMember:true,
            rowData
        })
    }
    getList=(query)=>{
        let {userInfo} = this.state
        query.studioStatus='正常'
        query.userName = userInfo.userName
       return InnovationStudioController.canApplyStudioList(query)
    }
    handleSearch=(query)=>{
        this.setState({query})
        this.freshen()
    }
    reset=()=>{
        this.setState({query:{}})
        this.freshen()
    }
    onRef=(ref)=>{
        this.setState({modal:ref})
    }
    onCancel=()=>{
        this.setState({visibleUpdate:false,visibleNewStudio:false})
        this.freshen()
    }
    freshen=()=>{
        this.setState({freshen:!this.state.freshen})
    }
  
    showDetail=(rowData)=>{
        this.setState({rowData,visibleDetail:true})
    }
    render() {
        const {rowData,query,visibleDetail,freshen}=this.state
        const columns=[
            {title:'工作室编码',dataIndex:'studioCode',align:'center'},
            {title:'工作室名称',dataIndex:'studioName',align:'center'},
            {title:'负责人',dataIndex:'studioLeaderName',align:'center'},
            {title:'创建时间',dataIndex:'createdAt',align:'center'},
            {title:'创建人',dataIndex:'createdByUserCode',align:'center'},
            {title:'状态',dataIndex:'studioStatus',align:'center'},
            {title:'级别',dataIndex:'level',align:'center'},
            {title:'操作',dataIndex:'id',render:(text,rowData)=>{return<div>
                {rowData.studioStatus==='正常'&&<Button type={'primary'} onClick={this.applyToJoin.bind(this,rowData)} style={{margin:5}}>申请加入</Button>}
                {rowData.studioStatus==='正常'&&<Button type={'primary'} onClick={this.showDetail.bind(this,rowData)} style={{margin:5}}>查看详情</Button>}

            </div>}},
        ]
        const searchItem=[
            {name:'工作室名称',keyName:'studioName',valueType:'text'},
        ]
        return (            
                <div>         
                <Card>
                    <UseSearch searchItem={searchItem} handleSearch={this.handleSearch} reset={this.reset}
                    />                                                                                                              
                </Card>
                <Card style={{marginTop:10}}>                    
                    <UseTable getData={this.getList} columns={columns} rowKey={'id'} query={query} refresh={freshen} /> 
                </Card>
                <Modal
                visible={visibleDetail}
                footer={false}
                width={'80%'}
                onCancel={()=>this.setState({visibleDetail:false})}
                >
                  {visibleDetail&&<StudioDetail childData={rowData}/>}
                </Modal>
                </div>
        );
    }
}

export default CanApplyStudioList;